<template>
  <div class="main">
		<van-nav-bar  title="项目详情" left-arrow @click-left="$utils.back($route.path)" />	
		<div class="mainimg" v-if="productInfo">
			<van-swipe  class="my-swipe media-box"  indicator-color="white" loop>
				<van-swipe-item v-for="(item, index) in productInfo.ImageUrl" :key="index" >
					<img-box  :img-url="item" />	
				</van-swipe-item>
			</van-swipe>			
				
			<div class="label mlr-24">
				<div class="heart"></div><span class="color-primary2 ml-8 mr-48 fw-b">无忧购</span>
				<img src="@/assets/images/physio/refund.png" /><span class="ml-4 mr-22">爽约包退</span> 
				<img src="@/assets/images/physio/realname.png" /><span class="ml-4 mr-22">实名认证</span>
				<img src="@/assets/images/physio/credential.png" /><span class="ml-4 mr-22">资质证书</span>
			</div>
		</div>
		<div class="techincian mg-24 pd-24 br-24 bg-white flex-s-c">
			<div>
				<div class="fs-34 color-black2 mb-24 fw-b">{{ productInfo.ProductName }}</div>
				<div class="color-primary3">
					<span class="fs-34">￥</span><span class="fs-43 fw-b">{{ productInfo.V_GradePrice ? productInfo.V_GradePrice.toFixed(2) : ''}}</span>
				</div>
				<div class="right-box-text color-gray7 text-show-line-1" v-if="productInfo.TagsList && productInfo.TagsList.length > 0">
					<span>{{ productInfo.ServiceDuration }}分钟</span>
					<span v-for="(items,index) in productInfo.TagsList" :key="index">{{ items.Name }}</span>
				</div>
				<div class="right-box-text color-gray7 text-show-line-1" v-else>
					<span>{{ productInfo.ServiceDuration }}分钟</span>
				</div>
			</div>
			<div class="color-gray7 yuyue">已预约{{ productInfo.SaleCounts }}</div>				
		</div>
		<div class="service_main">
			<van-tabs v-model:active="active"  @change="tabChange" >
				<van-tab :title="item.title" v-for="(item,index) in tabs" :key="index">
					<div v-if="state == 0 && artificerList && artificerList.length > 0" class="fs-24 bg-white pd-24 van-clearfix technician_list">
						<div v-for="(item,index) in artificerList" :key="index" class="mt-24 fs-24 bg-white br-24  van-clearfix">
							<div class="physio"  :key="index">
								<div class="avator" @click="showAvatar(item.Photo)">
										<div v-if="item.StarLevel == 5 && item.Satisfaction >= 99" class="avars">
											<img class="champimg" src="@/assets/images/physio/champion.png" />
											<img class="champion" src="@/assets/images/physio/champion.gif" />
											<img-box class="avatar" :isBr50="isBr50" :img-url="item.Photo" />
										</div>
										<div v-else class="avar" @click="showAvatar(item.Photo)">
											<img-box class="classImg" :isBr50="isBr50" :img-url="item.Photo" />
										</div>
										<div class="serve" >{{ item.BookStateName }}</div>
								</div>
								<div class="usermsg">
									<div class="user">
										<span class="username">{{ item.Name }}</span>
										<img v-if="item.StarLevel == 5 && item.Satisfaction >= 95" src="@/assets/images/physio/quality.png" />
										<img v-if="item.Punctuality >= 98" src="@/assets/images/physio/run.png" />
										<span class="lifephoto" @click="showPhoto(item.Photos)">生活照</span>
									</div>
									<div class="color-gray7">订单量 {{ item.FinishOrderCount }} 　好评率 {{ item.Satisfaction }}%</div>
									<div class="storemsg">
										<div class="evanum" @click="goStore(item.UserId)"><img class="item-icon" src="@/assets/images/physio/store.png" /><div class="storename">{{ item.DisStoreName }}</div></div>	
										<div class="evanum" @click="goEvaluation(item.UserId)"><img class="item-icon" src="@/assets/images/physio/comment.png" /><div>{{ item.CommentCount }}</div></div> 
									</div>
									<div class="address"><img  src="@/assets/images/physio/address.png" />{{ item.Distance.toFixed(2) }}KM</div>
								</div>
								<div class="markorder"  v-if="item.BookStateName != '不可预约'">
									<div class="restime color-black2">
										<div class="reducible">可约时间</div>
										<div class="time">{{ item.NextBookTime }}</div>
									</div>
									<van-radio-group v-model="radio" >
										<van-radio :name="item.UserId" checked-color="#24c373" />
									</van-radio-group>
								</div>
							</div>
						</div>						
					</div>
					<div v-else-if="state == 1" class="bg-white pd-24" v-html="productInfo.Description"></div>
					<div v-else class="bg-white pd-24" v-html="bookDescription"></div>
				</van-tab>
			</van-tabs>
		</div>

		<!-- 底部确认订单 -->
		<div class="fixed-bottom">
			<div class="flex flex-s-s ptb-20 plr-25 bg-white bottom-box">
				<div class="flex">
					<span class="fs-24 color-dark mt-18">合计</span>
					<!--{{totalPay ? totalPay.toFixed(2) : ''}}-->
					<span class="fs-28 color-primary3 mt-16">￥</span> <span class="color-primary3 fs-36  fw-600 mt-5">{{ productInfo.V_GradePrice ? productInfo.V_GradePrice.toFixed(2) : ''}}</span>
				</div>
				<button class="bg-primary color-white placeorder" @click.stop="submitOrder">立即下单</button>						
			</div>
		</div>
		<van-popup position="bottom" class="pd-24 h-140" v-model="showAddServe">
			<div class="fs-28 fw-b">服务项目</div>			
			<div class="service_item ptb-24" >				
				<div class="service_img">
					<img-box class="classImgs br-16 ofh" :img-url="productInfo.ThumbnailUrl410" />
				</div>
				<div class="ml-24 service_content">
					<div>
						<div class="service_name">{{ productInfo.ProductName }}</div>
						<div class="right-box-text color-gray7 text-show-line-1" v-if="productInfo.TagsList && productInfo.TagsList.length > 0">
							<span>{{ productInfo.ServiceDuration }}分钟</span>
							<span v-for="(items,index) in productInfo.TagsList" :key="index">{{ items.Name }}</span>
						</div>
						<div class="right-box-text color-gray7 text-show-line-1" v-else>
							<span>{{ productInfo.ServiceDuration }}分钟</span>
						</div>
					</div>						
					<div class="mt-36 flex flex-s-c">
						<div><span class="service_unit fs-28">￥</span><span class="service_price">{{ productInfo.V_GradePrice ? productInfo.V_GradePrice.toFixed(2) : ''}}</span></div>
						<van-stepper v-model="number" theme="round" button-size="24" integer  disable-input/>
						<!--<div class="flex-1 tar flex-fe-c" v-for="(iitem, index) in productInfo.ProductSkuList" :key="index">
							<span
								class="btn-minus flex-s-0 "
								:class="iitem.Amount <= 0 ? 'color-shadow' : ''"
								@click="changeAmount(iitem, iitem.Amount, iitem.Stock, -1, changeData.MinNum, activeUnitRatio, iitem.LimitBuy)"
							>-</span>
							<div class="btn-input-box">
								<input
									v-model="iitem.Amount"
									type="number"
									class="btn-input"
									@blur="changeAmount(iitem, item.Amount, iitem.Stock, 0, changeData.MinNum, activeUnitRatio, iitem.LimitBuy)"
								>
							</div>
							<span
								class="btn-plus flex-s-0"
								@click="changeAmount(iitem, iitem.Amount, iitem.Stock, 1, changeData.MinNum, activeUnitRatio, iitem.LimitBuy)"
							>+</span>
						</div>-->
					</div>
				</div>
			</div>
			<div class="fixed-bottom">
				<div class="flex flex-s-s ptb-20 plr-25 bg-white bottom-box">
					<div class="flex">
						<span class="fs-24 color-dark mt-18">合计</span>
						<!--{{totalPay ? totalPay.toFixed(2) : ''}}-->
						<span class="fs-28 color-primary3 mt-16">￥</span> <span class="color-primary3 fs-36  fw-600 mt-5">{{ totalPrice ? totalPrice.toFixed(2) : '0'}}</span>
					</div>
					<button class="bg-primary color-white placeorder" @click.stop="submit">立即下单</button>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="showPhotos" class="photos">
			<van-swipe class="my-swipe media-box"  indicator-color="white" loop>
				<van-swipe-item v-for="(item, index) in Photos" :key="index">
					<van-icon name="cross popup-close"  size="23" @click="showPhotos = false" />
					<img-box class="shop-bg-box z-inner pos-r" :img-url="item" />
				</van-swipe-item>
			</van-swipe>
		</van-popup>
		<van-popup v-model="showAvatars" class="photos">
				<van-swipe class="my-swipe media-box"  indicator-color="white" loop>
					<van-swipe-item>
						<van-icon name="cross popup-close"  size="23" @click="showAvatars = false" />
						<img-box class="shop-bg-box z-inner pos-r" :img-url="Avatar" />
					</van-swipe-item>
				</van-swipe>
			</van-popup>
	</div>
</template>
<script>
import imgBox from 'components/imgBox'
import service from 'components/physio/service.vue'
import { GetInintProductDetailInfo } from 'api/product'
import { GetArtificerPage,GetBookHomeSettingInfo } from 'api/physio'
import { AddOrEditUserTempCarList } from 'api/member'
import { GetUserCityId } from 'api/store'
import utils from 'utils/utils'

export default {
	components: {
		imgBox,
    service,
  },
	
	data(){
		return{
			tabs:[
				{
					title:'服务技师',
					status:0,
				},
				{
					title:'项目详情',
					status:1,
				},				
				{
					title:'预定须知',
					status:2,
				}				
			],			
			active:0,
			productInfo:{}, 
			productId: 0,
			state: 0, //0服务技师 1项目详情 2预定须知
			recommendCondition:{					
				Lng: 0,
				Lat: 0,
				pageIndex: 1,
				pageSize: 10,
				selectCityId: 0,
				isNeedPosition: 1
			},
			artificerList: [], //技师列表
			bookDescription: '', //下单须知
			radio: 0,
			cartRequestList:[], 			
			isBr50: true, //用来判断图片圆形
			showAddServe: false,
			changeData: [],
      activeUnitRatio: 1,
			totalPrice: 0,
			showPhotos: false, //生活照弹窗
			Photos: [], //生活照列表
			locationCity: {
        ID: 0,
        Name: '定位中...'
      },			
      locationInit: false,
			Avatar: '',
			showAvatars: false,
			number: 1,
		}
	},
	created(){
		this.productId = this.$route.query.productId
		this.recommendCondition.selectCityId = this.$route.query.areaId
		this.recommendCondition.productId = this.productId
		this.GetInintProductDetailInfo(this.productId)
		this.GetArtificerPage()		
		this.getPosition()
		setTimeout(() => {			
			this.GetBookHomeSettingInfo()
		},2000)
	},
	methods: {
		tabChange(e){
			console.log('e',e)
			this.state = e
		},
		GetInintProductDetailInfo(){
			GetInintProductDetailInfo({productId:this.productId}).then(res =>{
				if(res){					
					this.productInfo = res.Data.ProductInfo
					if(this.productInfo.ProductSkuList[0].Amount === 0){
						this.productInfo.ProductSkuList[0].Amount ++
					}
					this.productInfo.ImageUrl = res.Data.ProductInfo.ImageUrl.split(',')
					this.totalPrice = this.productInfo.ProductSkuList[0].Amount * this.productInfo.ProductSkuList[0].V_GradePrice
				}
			})
		},
		GetArtificerPage(){
			GetArtificerPage(this.recommendCondition).then(res =>{
        if (res) {
          if (res.Data && res.Data.Data && res.Data.Data.length > 0) {
            res.Data.Data.forEach(tem => {							
							tem.Photos = tem.Photo.split(',')
              if (!tem.Logo && tem.Photo) {
                tem.Photo = tem.Photo.split(',')[0]
              }
							if(tem.NextBookTime != ''){			
								let booktime = tem.NextBookTime.split(' ')[1]
								tem.NextBookTime = booktime.split(':')[0] + ":" + booktime.split(':')[1]
							}
              this.artificerList.push(tem)
            })
						if(this.artificerList.length > 0 && this.artificerList[0].BookStateName != '不可预约'){						
							this.radio = this.artificerList[0].UserId
						}
          }					
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
          this.listLoad = true
          this.isLoading = false
        }
      })
		},
		GetBookHomeSettingInfo(){
			if(this.artificerList.length > 0){
				GetBookHomeSettingInfo({supplierId:this.artificerList[0].DisSupplierId}).then(res =>{
					if(res){					
						this.bookDescription = res.Data.BookDescription						
					}
				})
			}
			
		},
		submitOrder(){
			if(this.radio === 0){
				this.$toast('请选择技师')
				return false
			}
			this.showAddServe = true			
		},
		//提交订单
		submit(){
			const data = {}
			const product =  this.productInfo.ProductSkuList[0]
			if(this.number > 0){
				data.Amount = this.number
				data.V_GradePrice = product.V_GradePrice
				data.ProductId = product.ProductId
				data.SkuId = product.ID
				data.Source = 0
				data.StoreId = product.StoreId
				this.cartRequestList.push(data)
				AddOrEditUserTempCarList({list:this.cartRequestList}).then(res => {
					this.$router.push('/physioSubmitOrder/' + this.radio)
				})
				this.showAddServe = false
			}else{
				this.$toast("服务数量不能为0")
			}			
		},
		// 定位
    getPosition() {
      // 获取当前城市（缓存）
      const _str = localStorage.getItem('SelectCity')
      if (_str) {
        const _obj = JSON.parse(_str)
        //this.locationCity.Name = _obj.Name
        //this.locationCity.ID = _obj.ID
        //this.recommendCondition.areaId = _obj.ID
        // 获取经纬度缓存
        const _GeolocationData = localStorage.getItem('GeolocationData')
				
				console.log(_obj.Name,_GeolocationData,"66666666")
        if (_GeolocationData) { // 存在定位缓存
          const _GeolocationObj = JSON.parse(_GeolocationData)
          if (_GeolocationObj.center && _GeolocationObj.center.length > 0) {
            this.recommendCondition.Lng = _GeolocationObj.center[0]
            this.recommendCondition.Lat = _GeolocationObj.center[1]
          } else if (_GeolocationObj.position) {
            this.recommendCondition.Lng = _GeolocationObj.position.lng
            this.recommendCondition.Lat = _GeolocationObj.position.lat
          }
          this.listLoad = true
          this.isRefresh = true
          //this.onRefresh()
        } else {
          // 调用定位获取经纬度
          this.getCurrentPosition(_obj.Name)
        }
      } else {
        this.GetUserCityId()
      }
    },
		goStore(id){
			this.$router.push('physioCertificate/' + id)
		},
		goEvaluation(id){
			this.$router.push({
				path: '/physioValuationList',
				query: {
					id: id,
				}
      })			
		},
		showPhoto(item){
			this.showPhotos = true
			this.Photos = item
		},
		showAvatar(item){
			this.Avatar = item
			this.showAvatars = true
		},
		changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy) {
			item.Amount = num
      this.$utils. changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy) 
			this.totalPrice = item.V_GradePrice	* item.Amount	
			console.log(item,num)
    },

		// 监听定位
		getCurrentPosition(cityName) {
      const _this = this
      // 对查询条件经纬度赋值0 0
      delete _this.recommendCondition.Lng
      delete _this.recommendCondition.Lat

      _this.locationCity.Name = cityName || '定位中...'
      _this.locationInit = !!cityName
      console.log(_this.locationInit)
      this.$toast.loading({
        forbidClick: true,
        message: 'loading...',
        loadingType: 'spinner',
        duration: 0
      })
      _this.$geolocation.getCurrentPosition(function(status, result) {
        if (status === 'complete') {
          _this.onComplete(result)
        } else {
          _this.onError(result)
        }
      })
    },

    // 精准定位成功
    onComplete(data) {
      console.log('精准定位成功')
      console.log(data,"选择地区")
      localStorage.setItem('GeolocationData', JSON.stringify(data))
      this.$toast.clear()
      // 对查询条件经纬度赋值
      this.recommendCondition.Lng = data.position.lng
      this.recommendCondition.Lat = data.position.lat
      if (!this.locationInit) {
        this.locationCity.Name = data.addressComponent.district || data.addressComponent.city
        const adcode = parseInt(data.addressComponent.adcode.substr(0, 4) + '00').toString()
        this.GetCityIdByCode(adcode)
      } else {
        this.listLoad = true
        this.isRefresh = true
        this.onRefresh()
      }
    },
    // 精准定位失败
    onError(data) {
      console.log('精准定位失败')
      const _this = this
      _this.$geolocation.getCityInfo(function(status, result) {
        if (status === 'complete') {
          _this.onComplete1(result)
        } else {
          _this.onError1(result)
        }
      })
    },
    // ip定位成功
    onComplete1(data) {
      console.log('ip定位成功')
      console.log(data,"地区")
			this.recommendCondition.adcode = data.adcode
			this.recommendCondition.selectCityId = 0
      localStorage.setItem('GeolocationData', JSON.stringify(data))
      this.$toast.clear()
      // 对查询条件经纬度赋值
      this.recommendCondition.Lng = data.center[0]
      this.recommendCondition.Lat = data.center[1]
      // 第一次初始化定位城市
      if (!this.locationInit) {
        this.locationCity.Name = data.city
        const adcode = parseInt(data.adcode.substr(0, 4) + '00').toString()
        this.GetCityIdByCode(adcode)
      } else {
        this.listLoad = true
        this.isRefresh = true
        this.onRefresh()
      }
    },
    // ip定位失败
    onError1(data) {
      console.log('ip定位失败')
      console.log(data)
      this.$toast.clear()
      this.$toast.fail({
        message: '获取定位信息失败，请刷新',
        icon: 'close'
      })
      this.locationCity.Name = '未知'
      setTimeout(() => {
        if (!this.locationInit) {
          this.locationInit = true
          this.listLoad = true
          this.isRefresh = true
          this.onRefresh()
        }
      }, 1000)
    },
		// 获取所属区域
    GetUserCityId() {
      GetUserCityId().then(res => {
        if (res && res.Data) {
          if (res.Data.ID === 0) {
            this.getCurrentPosition()
          } else {
            const _str = JSON.stringify(res.Data)
            localStorage.setItem('SelectCity', _str)
            this.getPosition()
          }
        }
      })
    },
	}
}
</script>
<style lang="scss" scoped>
	.main{
		padding-bottom: 182px;
	}
	.mainimg{
		position: relative;
		margin-bottom: 56px;
	}
	.label{
		background: linear-gradient(270deg, #FFFAFE 0%, #FFF4FC 100%);
		border-radius: 16px;
		padding: 14px 28px;
		position: absolute;
		bottom: -32px;
		display: flex;
		align-items: center;		
		width: calc(100% - 48px);
		img{
			width: 32px;
		}
	}
	.van-tabs__wrap{
		border-bottom: 1px solid #F2F3FC;
	}
		
	.placeorder{
		width: 224px;
		height: 72px;
		background: #24c373;
		border-radius: 36px;
		text-align: center;
		font-size: 28px;
	}
	.valuation{
		height: 260px;
		overflow: hidden;
	}

	.right-box-text{
		color: #2A2D33;
		font-size: 32px;
		padding-right: 10px;
		font-weight: 500;
		letter-spacing: 2px;
		span{
			background-color: #F2F3FC;
			padding: 4px 8px;
			font-size: 24px;
			border-radius: 4px;
			text-align: center;
			margin-right: 10px;
		}
	}
	.yuyue{
		width: 25%;
	}
	.serve{
		width: 108px;
		height: 36px;
		background: #24c373;
		border-radius: 16px 8px 16px 8px;
		text-align: center;
		font-size: 22px;
		color: #fff;
		margin-top: 14px;
	}
	.service_main{
		border-radius: 24px 24px 0px 0px
	}
	.technician_list{
		border-top: 1px solid #F2F3FC;
	}
	.physio{
		display: flex;
		padding: 24px;
		background: #FAFAFA;
		border-radius: 24px;
	}
	.avator{
		display: flex;
		flex-direction: column;
		align-items: center;
	}	
	.avars{
		width: 144px;
		height: 144px;
		position: relative;	
	}
	.champimg{
		width: 176px;
		height: 176px;
		z-index: 300;
		top: -19px;
		left: -21px;
	}
	.champion{
		position: absolute;
		width: 74px;
		height: 74px;
		left: -20px;
		top: -20px;
		z-index: 101;
	}
	.avatar{
		width: 144px;
		height: 144px;
		border-radius: 50%;
		position: absolute;
		top: 0;
	}
	.avar{
		width: 144px;
		height: 144px;
		border-radius: 50%;
	}
	.classImg{
		width: 144px;
		height: 144px;
	}
	.usermsg{
		width: calc(100% - 320px);
		margin-left: 24px;
	}
	.user{
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		.username{
			font-size: 32px;
			color: $black2;
			font-weight: 500;
			font-family: PingFangSC-Medium, PingFang SC;
			margin-right: 8px;
			width: 140px;
			overflow: hidden;
			text-overflow: -o-ellipsis-lastline;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		img{
			margin-right: 8px;
			width: 32px;
		}
		.lifephoto{
			height: 32px;
			line-height: 32px;
			background: #F2F3FC;
			border-radius: 4px;
			font-size: 20px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #545965;
			padding: 0 8px;
		}
	}
	.storemsg{
		margin-top: 14px;
		display: flex;
		align-items: center;
		margin-bottom: 14px;
		img{
			margin-right: 4px;
			width: 24px;
		}
		.storename{
			margin-right: 64px;
		}
	}
	.evanum{
		display: flex;
		align-items: center;
	}
	.address{
		display: flex;
		align-items: center;
		img{
			width: 24px;
			margin-right: 2px;
		}
	}
	.markorder{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-left: 16px;
		width: 156px;
	}
	.restime{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F2F3FC;
		border-top: 2px solid #24c373;
		width: 100%;
		.reducible{
			font-size: 20px;
			margin-top: 4px;
		}
		.time{
			font-size: 28px;
		}
	}
	
	.heart{
		position:relative;
		top: 0px;
		left: 0;
		width: 20px;
		height: 20px;
		background-color: #F17FD2;
		transform: rotate(-45deg);
		margin-right: 8px;
	}
	.heart:before {
		content: "";
		position:absolute;
		top: -10px;
		left: 0;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #F17FD2;
	}
	.heart:after{
		content: "";
		position: absolute;
		top: 0px;
		left: 10px;
		width: 20px;
		height: 20px;
		background-color: #F17FD2;
		border-radius: 50%;
	}
	.fs-43{
		font-size: 43px;
	}
	.addserveimg{
		width: 120px;
	}
	.servemsg{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.h-140{
		height: 460px;
		border-radius: 40px 40px 0px 0px;
	}
	/deep/.van-tab--active{
		color:#24c373;
	}
	/deep/.van-tabs__line {
		background:#24c373;
	}
	.photos{
		width: 100%;
	}
	.shop-bg-box{
		width: 100%;	
	}
	.popup-close {
		position: absolute;
		right: 30px;
		top: 30px;
		z-index: 2005;
	}
	.item-icon{
		width: 24px;
		height: 26px;
	}
	.service_item{
		display: flex;
		justify-content: space-between;
		border-bottom: 2px solid #F2F3FC;
	}
	
	.service_name{
		font-size: 32px;
		color: $black2;
		margin-bottom: 12px;
	}

	.service_unit{
		color: #EC612A;
	}
	.service_price{
		font-size: 36px;
		font-weight: bold;
		color: #EC612A;
		margin-right: 8px;
	}
	.service_content{
		width: calc(100% - 224px);
		display: flex;
    flex-direction: column;
    justify-content: space-between;
	}
	.btn-minus{
		width: 40px;
		height: 40px;
		line-height: 40px;
		background: #F2F2F2;
		margin-right: 10px;
		border-radius: 50%;
		font-size: 40px;
		text-align: center;
	}
	.btn-plus{
		width: 40px;
		height: 40px;
		line-height: 40px;
		background: $physio-primary1;
		margin-left: 10px;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		font-size: 40px;
	}

	.service_img{
		width: 224px;
		height: 180px;
		border-radius: 16px;
	}
	.classImgs{
		width: 224px;
		height: 180px;
	}
	.btn-input-box{
		position: relative;
		margin: 0 4px;
		.btn-input{
			position: relative;
			z-index: 1;
			height: 56px;
			width: 50px;
			line-height: 1;
			border: none;
			text-align: center;
		}
	}
	/deep/.van-stepper--round .van-stepper__minus {
    color: #333;
    border: 1px solid #f2f2f2;
    background: #f2f2f2;
	}
	/deep/.van-stepper--round .van-stepper__plus {
    color: #fff;
    background-color: #24c373;
	}
</style>
